<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<section>
			<div class="loader">
				<span style="--i:1;"></span>
				<span style="--i:2;"></span>
				<span style="--i:3;"></span>
				<span style="--i:4;"></span>
				<span style="--i:5;"></span>
				<span style="--i:6;"></span>
				<span style="--i:7;"></span>
				<span style="--i:8;"></span>
				<span style="--i:9;"></span>
				<span style="--i:10;"></span>
				<span style="--i:11;"></span>
				<span style="--i:12;"></span>
				<span style="--i:13;"></span>
				<span style="--i:14;"></span>
				<span style="--i:15;"></span>
				<span style="--i:16;"></span>
				<span style="--i:17;"></span>
				<span style="--i:18;"></span>
				<span style="--i:19;"></span>
				<span style="--i:20;"></span>
			</div>
		</section>
		

	</body>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: 100%;
			filter: hue-rotate(0deg) filter:hue-rotate(360deg)
		}

		section {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background-color: #042104;
			animation: animatiBG 10s linear infinite;
		}
		
		@keyframes animatiBG{
			0%{
				filter: hue-rotate(0deg);
			}
			100%{
				filter: hue-rotate(360deg);
			}
		}

		section .loader {
			position: relative;
			width: 120px;
			height: 120px;
		}

		section .loader span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transform: rotate(calc(18deg* var(--i)));
		}

		section .loader span::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
			width: 15px;
			height: 15px;
			background: #00ff0a;
			box-shadow: 0 0 10px #00ff0a,
						0 0 20px #00ff0a,
						0 0 40px #00ff0a,
						0 0 60px #00ff0a,
						0 0 80px #00ff0a,
						0 0 100px #00ff0a;
			animation: animatik 2s linear infinite;
			animation-delay: calc(0.1s * var(--i));
		}
		
		@keyframes animatik{
			0%{
				transform: scale(1);
			}
			100%{
				transform: scale(0);
			}
		}
	</style>
</html>